<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<title>家长中心</title>
	<script>
		if (self == top) location.replace('/wechat/footer.html?href=' +
			encodeURIComponent(location.href.substr(location.origin.length)));
	</script>
	<link rel="stylesheet" href="../css/aa.css">
	<style>
		.change-students {
			position: absolute;
			right: 0.5rem;
			top: 2.5rem;
			color: white;
			font-size: 14px;
		}
	</style>
</head>

<body style="position: relative">

	<div id="vue-root">
		<form id="form" method="post" ref="form" enctype="multipart/form-data" style="display: none">
			<input type="file" id="file" ref="file" name="file" accept="image/*" @change="upload">
		</form>
		<div class="alert" v-if="chooseShow">
			<div style="overflow-y: scroll;max-height: 80vh;">
				<div>请选择学生</div>
				<table>
					<tr v-for="(item,index) in students" :key="item.id" @click="choose(index)">
						<td v-text="item.schoolName"></td>
						<td v-text="item.classesName"></td>
						<td v-text="item.name"></td>
					</tr>
				</table>
			</div>
		</div>

		<div class="header">
			<div class="header-title" v-text="student.schoolName"></div>
			<div class="change-student" v-if="students.length>1" @click="chooseShow=true">角色切换</div>
			<div class="change-students" onclick="top.location.replace('student_center.html')">切至新版</div>
			<div class="header-portrait"><img :src="getImg(student.avatar)" class="avatar" @click="chooseImg" /></div>
			<div class="info">
				<div class="info-title">
					姓名:
				</div>
				<div class="info-details" v-text="student.name"></div>
				<div class="info-title">
					身份:
				</div>
				<div class="info-details" v-text="['本人','父亲','母亲','家长'][student.type]"></div>
				<div class="info-title">
					班级:
				</div>
				<div class="info-details" v-text="student.classesName"></div>
			</div>
			<div class="fill"></div>
		</div>
		<div class="center">
			<div v-for="(cell,index) in menus" :key="index">
				<a :href="cell.href">
					<div>
						<span class="unread" v-if="cell.field&&unread[cell.field]" v-text="unread[cell.field]"></span>
						<img :src="cell.img" alt="">
						<p v-text="cell.text"></p>
					</div>
				</a>
			</div>
		</div>

	</div>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/wechat/js/wx.js"></script>
	<script src="/js/common.js"></script>

	<script>

		function store(student) {
			sessionStorage['hxt-student'] = JSON.stringify(student);
		}

		var menus = [{
			text: '我的作业',
			href: 'my_homrwork.html',
			img: '../image/home_work.png',
			field: 'homework'
		}, {
			text: '我的考勤',
			href: '../attendance.html',
			img: '../image/my_attendance.png',
			field: 'attendance'
		}, {
			text: '我的成绩',
			href: 'grade.html',
			img: '../image/my_grade.png',
			field: 'score'
		}, {
			text: '我的请假',
			href: 'my_leave.html',
			img: '../image/my_leave.png',
		}, {
			text: '我的食谱',
			href: '../cookbook.html',
			img: '../image/cookbook.png',
			field: 'cookbook'
		}, {
			text: '我的课表',
			href: '../public_timetable.html',
			img: '../image/timetable.svg',

		}, {
			text: '学校通知',
			href: '../school_notice.html',
			img: '../image/school_notice.png',
			field: 'notice'
		}, {
			text: '班级通知',
			href: '../classes_notice.html',
			img: '../image/classes_notice.png',
			field: 'classesNotice'
		}, {
			text: '班级圈',
			href: '../classes_circle.html',
			img: '../image/classes_circle.png',
			field: 'circle'
		}, {
			text: '学校视频',
			href: '../monitoring.html',
			img: '../image/monitoring.png',
		}, {
			text: '通讯录',
			href: '../chat_addresslist.html',
			img: '../image/chat.png',
			field: 'chat'
		}, {
			text: '学校介绍',
			href: '../school_intro.html',
			img: '../image/school_introduction.png',
		}, {
			text: '学校荣誉',
			href: '../school_honor.html',
			img: '../image/school_honor.png',
			field: 'honor'
		}, {
			text: '学校新闻',
			href: '../school_news.html',
			img: '../image/school_news.png',
			field: 'news'
		}, {
			text: '教师风采',
			href: '../school_teacher_mein.html',
			img: '../image/school_message.png',
			field: 'teacherMien'
		}, {
			text: '学校招生',
			href: '../school_enrollment.html',
			img: '../image/school_enrollment.png',
			field: 'enrollment'
		}, {
			text: '校车',
			href: '../bus.html',
			img: '../image/bus.svg'
		}, {
			text: '打卡消课',
			href: '../school_courses.html',
			img: '../image/lesson.svg'
		}, {
			text: '人脸考勤',
			href: '../face.html',
			img: '../image/school_message.png'
		}, {
			text: '放学时间',
			href: '../hometime.html',
			img: '../image/school_message.png'
		}];


		var app = new Vue({
			el: '#vue-root',
			data: {
				students: [],
				student: {},
				chooseShow: false,
				index: null,
				unread: {
					school: 0
				},
				menus: menus
			},
			created: function () {
				axios.get('/api/bound/student').then(function (res) {
					this.students = res.data;
					this.choose0();
				}.bind(this));
			},
			methods: {
				choose0: function () {
					if (this.students.length == 1) {
						this.choose(0);
					} else {
						var student = getStudent();
						if (student) {
							this.student = student;
							this.sync(student);
							return;
						}
						this.chooseShow = true;
					}
				},
				choose: function (index) {
					this.chooseShow = false;
					if (index === this.index) return;
					this.index = index;
					this.student = this.students[index];
					this.sync(this.student);
				},
				sync: function (student) {
					var run = function () {
						store(student);
						this.getUnread();
					}.bind(this);

					if (this.students.length == 1) {
						run();
						return;
					}
					axios.post('/api/switch/' + student.id).then(run);
				},
				/* unbind: function () {
					axios.post('/s/unbind').then(function (res) {
						sessionStorage.removeItem('hxt-student');
						if (this.students.length == 1) {
							location.replace('../index.html');
						} else {
							this.students.splice(this.index, 1)
							this.choose0();
						}
					}.bind(this));
				}, */
				getImg: function (pic) {
					if (!pic) return '../image/avatar.svg';
					return '/static/' + this.student.schoolId + '/binding/' + pic;
				},
				upload: function () {
					var schoolId = this.student.schoolId;
					if (!schoolId) throw 'no school id';
					axios.post('/s/upload/binding?schoolId=' + schoolId,
						new FormData(this.$refs.form)).then(function (res) {
							this.setAvatar(res.data.data);
						}.bind(this));
				},
				getUnread: function () {
					var cache = getUnreadCache();
					if (cache) {
						this.unread = cache;
						this.calUnreadSchool(this.unread);
						return;
					}

					var unread = getUnread();
					axios.post('/s/unread', unread).then(function (res) {
						this.unread = res.data;
						axios.post('/s/unread2', unread).then(function (res) {
							var data = res.data;
							this.unread = Object.assign(this.unread, data);
							setUnreadCache(this.unread);
							this.calUnreadSchool(this.unread);
						}.bind(this));
					}.bind(this));
				},
				calUnreadSchool: function (o) {
					Vue.set(this.unread, 'school', o.news + o.honor + o.enrollment + o.teacherMien);
				},
				chooseImg: function () {
					if (wxReady) {
						wxChooseImg(1, 'binding', this.setAvatar);
					} else {
						this.$refs.file.click();
					}
				},
				setAvatar: function (avatar) {
					axios.post('/s/binding', toFormParams({ avatar: avatar })).then(function (res) {
						this.student.avatar = avatar;
						store(this.student);
						this.$refs.file.value = '';
					}.bind(this));
				}
			}
		});
		sessionStorage['hxt-user'] = 'student';
	</script>

</body>

</html>